<template>
    <div class="content leftBox">
        <div class="titleBox between mb-12">
                <p class="text01">已安全生产 <span class="numStyle" v-for="(num,index) in totalData.indexData.dayNum" :key="index">{{num}}</span> 天</p>
                <div class="yearData">
                    <!-- <el-select class="w-10 m-2 mr-8" @change="changeyear" v-model="totalData.tableObj.year" clearable  placeholder="年份">
                        <el-option
                            v-for="item in totalData.tableObj.yearlist"
                            :key="item.value"
                            :label="item.label+'年'"
                            :value="item.value"
                            />
                    </el-select> -->
                    <el-date-picker
                        @change="changeyear"
                        v-model="tableObj.year"
                        type="year"
                        placeholder="年份"
                        />
                </div>
        </div>
        <div class="firstBox flex">
            <div class="fitstBoxItem p12 bgcolor">
                 <p class="text01 mb-12">本年吞吐量完成进度</p>
                 <div class="flex w100 contentHeight">
                     <div class="allRate flexcenter">
                         <el-progress type="dashboard" :percentage="totalData.statistics.allcompletionrate">
                            <template #default="{ percentage }">
                                <p class="percentage-value">{{ percentage }}%</p>
                                <p class="percentage-label mt-16">整体完成率</p>
                            </template>
                        </el-progress>
                     </div>
                     <div class="rateBox mr-8 p12 bgcolor01">
                         <div>
                             <p class="titlestyle">油品完成率</p>
                            <p class="titlestyle">{{totalData.statistics.youpinrate}}%</p>
                         </div>
                        <el-progress color="#91CC75" class="completionrate" id="annualtarget"  type="circle" :percentage="totalData.statistics.youpinrate" :width="47" :height="48" :show-text='false'>
                            <!-- <template #default="{ percentage }">
                                <span class="percentage-value">{{ percentage }}%</span>
                                <span class="percentage-label">完成率</span>
                            </template> -->
                        </el-progress>
                     </div>
                     <div class="rateBox  mr-8 p12 bgcolor01">
                           <div>
                             <p class="titlestyle">LPG完成率</p>
                            <p class="titlestyle">{{totalData.statistics.lpgrate}}%</p>
                         </div>
                        <el-progress color="#FAC858" class="completionrate" id="annualtarget"  type="circle" :percentage="totalData.statistics.lpgrate" :width="47" :height="48" :show-text='false'>
                            <!-- <template #default="{ percentage }">
                                <span class="percentage-value">{{ percentage }}%</span>
                                <span class="percentage-label">完成率</span>
                            </template> -->
                        </el-progress>
                     </div>
                     <div class="rateBox  mr-8 p12 bgcolor01">
                          <div>
                             <p class="titlestyle">散杂货完成率</p>
                            <p class="titlestyle">{{totalData.statistics.szhrate}}%</p>
                         </div>
                        <el-progress color="#73C0DE" class="completionrate" id="annualtarget"  type="circle" :percentage="totalData.statistics.szhrate" :width="47" :height="48" :show-text='false'>
                            <!-- <template #default="{ percentage }">
                                <span class="percentage-value">{{ percentage }}%</span>
                                <span class="percentage-label">完成率</span>
                            </template> -->
                        </el-progress>
                     </div>
                 </div>
            </div>
            <div class="fitstBoxItem ml-16 p12 bgcolor">
                <p class="text01 mb-12">本年每月吞吐量，及完成率</p>
                <div id="throughput"></div>
            </div>
            <div class="fitstBoxItem ml-16 p12 bgcolor">
                <div class="flexBetween">
                    <p class="text01 mb-12">存储剩余容量</p>
                    <div>
                        <el-select v-model="totalData.rongliang" @change="changeRongliang" class="m-2" placeholder="Select">
                            <el-option
                            v-for="item in totalData.typeData"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                </div>
                <div class="storagecapacityContent contentHeight flex">
                    <div class="storagecapacityRate flexcenter">
                         <el-progress type="dashboard" :percentage="totalData.storagecapacitynum.capacityrate">
                            <template #default="{ percentage }">
                                <p class="percentage-value">{{ percentage }}%</p>
                                <p class="percentage-label mt-16">整体剩余容量</p>
                            </template>
                        </el-progress>
                     </div>
                    <div class="storageTypeBox ">
                        <el-carousel height="177px" indicator-position="none">
                            <el-carousel-item v-for="item in totalData.storagecapacitynum.storageTypeData" :key="item">
                                <div class= "storageBox  ">
                                    <div class="h100 bgcolor01 p12 flexcolumnbetween">
                                        <div>
                                            <p class="titlestyle mb-16">{{item.title}}</p>
                                            <!-- <p class="titlestyle">{{item.rate}}%</p> -->
                                            <!-- <el-progress
                                                :text-inside="true"
                                                :stroke-width="20"
                                                :percentage="item.rate"
                                                status="exception"
                                                /> -->
                                                <el-progress :percentage="item.rate"  />
                                        </div>
                                        <div>
                                            <p class="text02">{{item.remark}}</p>
                                            <p class="text02 mt-8">{{item.num}}</p>
                                        </div>
                                        
                                    </div>
                                    
                                </div>
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                </div>
            </div>
        </div>
        <div class="second flex mt-16">
            <div class="secondItem50 flex">
                <div class="secondItem25 bgcolor p12">
                    <div class="flexBetween">
                        <p class="text01 mb-12">货物亏损率</p>
                        <div>
                            <el-select v-model="totalData.kuisun"  @change="changekuisun" class="m-2" placeholder="Select">
                                <el-option
                                v-for="item in totalData.typeDataAll"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </div>
                    </div>
                    <div class="contentHeight">
                        <div class="timeRange">
                            <div class="firstquarter w50 p12 bgcolor01  mt-8" v-for="(item,index) in totalData.quarterData" :key="index">
                                <p class="text03">{{item.title}}</p>
                                <p class="text01">{{item.data}}</p>
                                <p class="text05">同比
                                    <span :class="[item.rise == 0?'text06':'text07']" >
                                    <el-icon v-if="item.rise == 0"><CaretBottom /></el-icon> 
                                    <el-icon v-if="item.rise == 1"><CaretTop /></el-icon>
                                    {{item.yoy}}</span>
                                </p>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="secondItem25 ml-16  bgcolor p12">
                    <div class="flexBetween">
                        <p class="text01 mb-12">客户满意度</p>
                        <div>
                            <el-select v-model="totalData.manyidu" @change="changemanyidu" class="m-2" placeholder="Select">
                                <el-option
                                v-for="item in totalData.typeDataAll"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </div>
                    </div>
                    <div class="contentHeight">
                        <div class="timeRange">
                            <div class="firstquarter w50 p12 bgcolor01  mt-8" v-for="(item,index) in totalData.satisfactionData" :key="index">
                                <p class="text03">{{item.title}}</p>
                                <p class="text01">{{item.data}}</p>
                                <p class="text05">同比
                                    <span :class="[item.rise == 0?'text06':'text07']" >
                                    <el-icon v-if="item.rise == 0"><CaretBottom /></el-icon> 
                                    <el-icon v-if="item.rise == 1"><CaretTop /></el-icon>
                                    {{item.yoy}}</span>
                                </p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            
            <div class="secondItem50 ml-16 bgcolor p12">
                <p class="text01 mb-12">创记录展示</p>
                 <div class="w100 contentHeight recordInfoBox">
                     <div class="flexBetween" v-for="(item,index) in totalData.recordData" :key="index">
                         <div class="widthellipsis">
                             <el-tag type="" effect="dark" round > {{ item.address }} </el-tag>
                             <span class="text04 ml-8">{{item.info}}</span>
                         </div>
                         <div  class="text02 widthtime">{{item.time}}</div>
                     </div>
                 </div>
            </div>
        </div>
        <div class="third flex mt-16  ">
            <div class="thirdItem bgcolor p12">
                <div class="flexBetween">
                    <p class="text01 mb-12">货主排行</p>
                    <div>
                        <el-select v-model="totalData.paihang"  @change="changepaihang" class="m-2" placeholder="Select">
                            <el-option
                            v-for="item in totalData.typeData"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                </div>
                 <div class="w100 contentHeight mt-16">
                    <el-table
                        :data="totalData.rankData"
                        highlight-current-row
                        :header-cell-style="{ background: '#ffffff'}"     
                        
                        style="width: 100%"
                    > 
                        <el-table-column prop="ranknum"   label="排行" min-width="5%" />
                        <el-table-column prop="name"   label="货主名称" min-width="7%" />
                        <el-table-column prop="goodsnum"   label="累计委托货量（吨）" min-width="12%" />
                        <el-table-column prop="yeargoodsnum"   label="本年累计委托货量（吨）" min-width="14%" />
                        <el-table-column prop="firsttime"   label="初次委托时间" min-width="10%" />
                        <el-table-column prop="lasttime"   label="最近一次委托时间" min-width="11%" />
                    </el-table>
                </div>
            </div>
            <div class="thirdItem  ml-16 bgcolor p12">
                <div class="flexBetween">
                    <p class="text01 mb-12">货主库存</p>
                    <div>
                        <el-select v-model="totalData.kucun" @change="changekucun" class="m-2" placeholder="Select">
                            <el-option
                            v-for="item in totalData.typeData"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                </div>
                 <div class="w100 contentHeight mt-16">
                     <el-table
                        :data="totalData.stockData"
                        highlight-current-row
                        :header-cell-style="{ background: '#ffffff'}"     
                        
                        style="width: 100%"
                    > 
                        <el-table-column prop="ranknum"   label="排行" min-width="5%" />
                        <el-table-column prop="name"   label="货主名称" min-width="10%" />
                        <el-table-column prop="productType"   label="委托货种" min-width="10%" />
                        <el-table-column prop="leaveTime"   label="船舶离岗时间" min-width="12%" />
                        <el-table-column prop="days"   label="停留时间（天）" min-width="14%" />
                        <el-table-column prop="goodsnum"   label="剩余货量（吨）" min-width="14%" />
                        <el-table-column prop="progress"   label="提货进度" min-width="11%" >
                            <template  #default="scope">
                                <el-progress :percentage="scope.row.progress"  />
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { reactive,onBeforeMount,getCurrentInstance,onMounted} from "vue";
import {getIndexData,customerSatisfaction,remainingCapacity,lossRateOfGoods,shipperRank,shipperStock } from '@/api/index';
import { ElMessage, ElMessageBox,ElNotification } from "element-plus";

import store from '@/store'
const { proxy } = getCurrentInstance();
let tableObj = reactive({
        year:'2024',
        yearlist:[{
            label:'2024',
            value:'2024'
        },{
            label:'2025',
            value:'2025'
        }],
});
let totalData =  reactive({
    manyidu:1,
    kuisun:1,
    rongliang:1,
    paihang:1,
    kucun:1,  
    indexData:{},
    statistics:{},
    throughput:{},
    dayNum:'1234',
    typeData:[{
        label:'油品',
        value:1
    },{
        label:'散杂货',
        value:2
    }],
    typeDataAll:[{
        label:'油品',
        value:1
    },{
        label:'散杂货',
        value:2
    },{
        label:'LPG',
        value:3
    }],


    storagecapacitynum:'0',//存储剩余容量
    storageTypeData:[],
    //存储剩余容量
    quarterData:[],
    //客户满意度
    satisfactionData:[],
    //创记录展示
    recordData:[],
    rankData:[],
    stockData:[
    ]
})
const getIndexDataFun = (year) => {
    let obj = {
        userId: JSON.parse(localStorage.getItem('userData')).userId,
        year:year
    }
    getIndexData(obj).then((res)=>{
        if(res.code == 200){
                totalData.indexData = res.body;
                totalData.statistics = totalData.indexData.statistics;
                totalData.throughput= totalData.indexData.throughput;//吞吐量
                totalData.storagecapacitynum= totalData.indexData.storagecapacitynum;//剩余容量
                totalData.satisfactionData= totalData.indexData.satisfactionData; // 满意度
                totalData.quarterData= totalData.indexData.quarterData; //货物亏损率
                totalData.recordData= totalData.indexData.recordData; //创纪录展示
                totalData.rankData= totalData.indexData.rankData; //排名
                totalData.stockData= totalData.indexData.stockData; //库存
                initthroughput()
        }else{
            ElNotification({
                title: '提示',
                message: res.message?res.message:'服务器异常',
                type: 'warning',
            })
            if(res.code === 100007 ||  res.code === 100008 ||  res.code === 100011){
                    store.dispatch('app/logout')
                }
        }
    })
}
const changeyear = (val) =>{
    const date = new Date(val);
    let year =  date.getFullYear()+'';
    getIndexDataFun(year)
}
onBeforeMount(()=>{
    const date = new Date();
    let year =  date.getFullYear()+'';
    getIndexDataFun(year)
})
onMounted(()=>{
    initthroughput()
})
//本年每月吞吐量，及完成率
const initthroughput = ()=>{
     if (proxy.$echarts.getInstanceByDom(document.getElementById("throughput"))) {
        proxy.$echarts.dispose(document.getElementById("throughput"));
    }
    let classificationBox =  proxy.$echarts.init(document.getElementById("throughput"), "purple-passion");
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        grid: {
                left: '2%',
                right: '2%',
                bottom: '5%',
                containLabel: true
            },
        legend: {
            data: totalData.throughput.legenddata
        },
        xAxis: [
            {
            type: 'category',
            data: totalData.throughput.xaxisdata,
            axisPointer: {
                type: 'shadow'
            }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '单位：吨',
                min: 0,
                // max: 250,
                // interval: 50,
                axisLabel: {
                    formatter: '{value} '
                }
            },
            {
                type: 'value',
                name: '单位：%',
                min: 0,
                max: 25,
                interval: 5,
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
        series: [
            {
            name: '吞吐量',
            type: 'bar',
            tooltip: {
                valueFormatter: function (value) {
                return value + ' 吨';
                }
            },
            data: totalData.throughput.yaxisnum
            },

            {
            name: '完成率',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
                valueFormatter: function (value) {
                return value + '%';
                }
            },
            data:totalData.throughput.yaxisrate
            }
        ]
        };
    classificationBox.setOption(option, true);
    window.addEventListener("resize", function () {
        classificationBox.resize();
    });
}
//切换剩余容量
const changeRongliang = (val)=>{
    let obj = {
        type:val,
        userId: JSON.parse(localStorage.getItem('userData')).userId,
        year:tableObj.year
    }
    remainingCapacity(obj).then((res)=>{
        if(res.code == '200'){
            totalData.storagecapacitynum=res.body
        }else{
            ElNotification({
                title: '提示',
                message: res.message?res.message:'服务器异常',
                type: 'warning',
            })
            if(res.code === 100007 ||  res.code === 100008 ||  res.code === 100011){
                    store.dispatch('app/logout')
                }
        }
    })
}
//货物亏损率
const changekuisun = (val)=>{
        let obj = {
        type:val,
        userId: JSON.parse(localStorage.getItem('userData')).userId,
        year:tableObj.year
    }
        lossRateOfGoods(obj).then((res)=>{
            if(res.code == '200'){
                totalData.quarterData=res.body
            }else{
                ElNotification({
                    title: '提示',
                    message: res.message?res.message:'服务器异常',
                    type: 'warning',
                })
                if(res.code === 100007 ||  res.code === 100008 ||  res.code === 100011){
                        store.dispatch('app/logout')
                    }
            }
        })
}
//客户满意度
const changemanyidu = (val)=>{
    let obj = {
        type:val,
        userId: JSON.parse(localStorage.getItem('userData')).userId,
        year:tableObj.year
    }
        customerSatisfaction(obj).then((res)=>{
            if(res.code == '200'){
                totalData.satisfactionData=res.body
            }else{
                ElNotification({
                    title: '提示',
                    message: res.message?res.message:'服务器异常',
                    type: 'warning',
                })
                if(res.code === 100007 ||  res.code === 100008 ||  res.code === 100011){
                        store.dispatch('app/logout')
                    }
            }
        })
}
//货主排行
const changepaihang = (val)=>{
    let obj = {
        type:val,
        userId: JSON.parse(localStorage.getItem('userData')).userId,
        year:tableObj.year
    }
        shipperRank(obj).then((res)=>{
            if(res.code == '200'){
                totalData.rankData=res.body
            }else{
                ElNotification({
                    title: '提示',
                    message: res.message?res.message:'服务器异常',
                    type: 'warning',
                })
                if(res.code === 100007 ||  res.code === 100008 ||  res.code === 100011){
                        store.dispatch('app/logout')
                    }
            }
        })
}
//货主库存
const changekucun = (val)=>{
    let obj = {
        type:val,
        userId: JSON.parse(localStorage.getItem('userData')).userId,
        year:tableObj.year
    }
        shipperStock(obj).then((res)=>{
            if(res.code == '200'){
                totalData.stockData=res.body
            }else{
                ElNotification({
                    title: '提示',
                    message: res.message?res.message:'服务器异常',
                    type: 'warning',
                })
                if(res.code === 100007 ||  res.code === 100008 ||  res.code === 100011){
                        store.dispatch('app/logout')
                    }
            }
        })
}
</script>
<style lang="less" scoped>
.leftBox{
    width: calc(100% - 408px);
    height: 100%;
    margin-right: 12px;
    .titleBox{
        width: 100%;
        height: 48px;
        padding: 12px;
        background-color: #ffffff;
        :deep(.el-input){
                    width: 100px;
                }
        .numStyle{
            padding: 4px;
            background-color: #FF9458;
            color: #ffffff;
            text-align: center;
            line-height: 20px;
            margin-right: 2px;
        }
    }

}
:deep(.el-select){
    width: 100px;
}
.h50{
    height: 50%;
}
.h100{
    height: 100%;
}
.w50{
    width: calc(50% - 4px);
}
.widthtime{
    width: 150px;
}
.widthellipsis{
    width: calc(100% - 150px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.text01{
    color: #1C222C;
    font-weight: 700;
    font-size: 14px;
}
.text02{
    color: #797F89;
    font-size: 14px;
}
.text03{
    color: #4B515B;
    font-size: 14px;
}
.text04{
    color: #1C222C;
    font-size: 14px;
}
.text05{
    color: #797F89;
    font-size: 12px;
}
.text06{
    color: #EE6666;
    font-size: 12px;
}
.text07{
    color: #91CC75;
    font-size: 12px;
}
.p12{
    padding: 12px;
}
.bgcolor{
    background-color: #ffffff;
}
.bgcolor01{
     background-color: #f2f5fa;
}
.content{
    width: 100%;
    height: calc(100% - 48px);
    overflow-y: auto;
    overflow-x: hidden;
}
#throughput{
    height: calc(100% - 31px);
    width: 100%;
}
.contentHeight{
    height: calc(100% - 32px);
}
.storageTypeBox{
    width: calc(100% - 176px);
    height: 100%;
}
 .titlestyle{
            color: #4B515B;
 }
.firstBox{
    width: 100%;
    height: 232px;
    .fitstBoxItem{
        // background-color: #FF9458;
        height: 100%;
        width: calc(100% /3);
    }
    .contentHeight{
        height: calc(100% - 31px);
    }
    .rateBox{
        width: 106px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
       

    }
    .allRate{
        height: 100%;
         width: calc(100% - 326px);
    }
}
.second{
    width: 100%;
    height: 232px;
    .secondItem25{
        // background-color: #FF9458;
        height: 100%;
        width: calc(100% /2);
    }
    .secondItem50{
        // background-color: #FF9458;
        height: 100%;
        width: calc(100% /2);
    }
}
.third{
    width: 100%;
    height: calc(100% - 488px);
    .thirdItem{
        // background-color: #FF9458;
        .contentHeight{
            height: calc(100% - 47px);
        }
        height: 100%;
        width: calc(100% /2);
    }

}
.flexcenter{
    display: flex;
    align-items: center;
}
.flexBetween{
    display: flex;
    justify-content: space-between;
}
.flexcolumnbetween{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.storagecapacityRate {
    width: 175px;
    height: 100%;
}
.storageBox{
    padding: 16px 80px 0;
    height: 100%;
}
.firstquarter {
    float: left;
}
.timeRange {
    height: 100%;
    :nth-child(2n){
        margin-left: 8px;
    }
}
.recordInfoBox{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
:deep(.el-table--fit){
  height:100% !important;
}
:deep(.el-table__body-wrapper) {
  overflow-y: auto;
}
</style>